
// 引入公共样式
require('../../assets/css/css.less')

// 引入css样式
require('./home.less');

// 引入swiper的css
require('swiper/dist/css/swiper.css');

// 引用swiper
const Swiper = require('swiper');

// 获取axios工具函数
const request = require('../../utils/request')

// 引入tabbar渲染函数
const renderTabbar = require('../../utils/tabbar')

// 加载
window.onload = () => {
    // 渲染tabbar
    renderTabbar('home');


    // 获取dom
    const number1 = document.querySelector('.number1');
    const accrue1 = document.querySelector('.accrue1');
    const cord = document.querySelector('.cord');
    const number21 = document.querySelector('.number21');

    // 使用swiper
    let mySwiper = new Swiper('.swiper-container', {
        autoplay: 5000,//可选选项，自动滑动
        pagination: '.swiper-pagination',//分页器
        loop: true,//循环
    })

    // 获取打卡信息
    function getClockInInfo() {
        request.get('/api/user/clockInInfo').then(res => {
            console.log('res.data', res.data);
            // 解构数据
            let { errno, data } = res.data;
            // 2.判断
            if (errno === 0) {
                if (data.isClockIn) {
                    cord.textContent = '已打卡';
                    cord.className = 'corded';

                } else {
                    cord.textContent = '今日打卡';
                    cord.className = 'cord';

                }
            }
        })
    }

    // 初始化调用一次
    getClockInInfo()

    // 获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            // console.log('res.data',res.data);
            // 1.解构数据
            let { errno, data } = res.data;
            // 2.判断
            if (errno === 0) {
                // 3.处理业务逻辑
                render(data)
            }


        })
    }

    // 渲染函数 渲染dom 更新dom
    function render(data) {
        number1.textContent = data.ranking;
        accrue1.textContent = data.clockCount;
        number21.textContent = data.badges;
    }

    // 初始化调用一次
    getUserInfo()


    // 点击打卡
    cord.addEventListener('click', () => {
        request.post('/api/user/clockIn').then(res => {
            // 解构数据
            let { errno, message } = res.data;
            // 判断
            if (errno === 0) {
                // 打卡成功 重新请求数据 自动渲染
                getUserInfo()
                getClockInInfo()
                // alert(message)
            } else {
                alert(message)
            }
        })
    })
}
